<!-- 特殊作业报备 -->
<script lang="ts" setup>
import Filter from "./components/filter.vue";
import Handler from "./components/handler.vue";
import Sheet from "./components/sheet.vue";
import { createState } from "./state";
definePage({
	meta: { title: "特殊作业报备", order: 3 },
});
defineOptions({ name: "Report" });

const {
	page: { currentPage, pageSize, isLoading, total },
} = createState();

const year = ref("2024");

let value = [233, 233, 200, 180, 199, 233, 210, 180, 200, 180, 199, 233];
let value2 = {
	gridList: [
		"网格1",
		"网格2",
		"网格3",
		"网格4",
		"网格5",
		"网格6",
		"网格7",
		"网格8",
		"网格9",
		"网格10",
	],
	num1: [100, 12, 32, 64, 32, 41, 52, 63, 44, 12],
	num2: [10, 12, 12, 14, 13, 11, 22, 14, 14, 12],
};

const option1 = ref({
	grid: {
		containLabel: true,
		left: 0,
		top: 10,
		bottom: 5,
		right: 15,
	},
	tooltip: {
		trigger: "axis",
		appendToBody: true,
		axisPointer: {
			lineStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "rgba(255,255,255,0)", // 0% 处的颜色
						},
						{
							offset: 0.5,
							color: "rgba(255,255,255,1)", // 100% 处的颜色
						},
						{
							offset: 1,
							color: "rgba(255,255,255,0)", // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		},
	},
	xAxis: [
		{
			name: "月",
			type: "category",
			boundaryGap: false,
			axisLabel: {
				formatter: "{value}",
				fontSize: 10,
				color: "#798A9B",
			},
			axisLine: {
				lineStyle: {
					color: "#243753",
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisTick: {
				show: false,
			},
			data: [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月",
				"7月",
				"8月",
				"9月",
				"10月",
				"11月",
				"12月",
			],
		},
	],
	yAxis: [
		{
			name: "个数",
			boundaryGap: false,
			type: "value",
			axisLabel: {
				fontSize: 10,
				color: "#798A9B",
			},
			splitLine: {
				lineStyle: {
					color: "#2437530f",
				},
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#283352",
				},
			},
			axisTick: {
				show: false,
			},
		},
	],
	series: [
		{
			name: "隐患数量",
			type: "line",
			smooth: true,
			showSymbol: true,
			symbolSize: 3,
			zlevel: 3,
			itemStyle: {
				color: "#0286ff",
				borderColor: "#a3c8d8",
			},
			lineStyle: {
				normal: {
					width: 2,
					color: "#7AD2FB",
				},
			},
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: "rgba(88,255,255,0.2)",
							},
							{
								offset: 0.8,
								color: "rgba(88,255,255,0)",
							},
						],
						false,
					),
				},
			},
			data: value,
		},
	],
});

const option2 = ref({
	grid: {
		containLabel: true,
		left: 0,
		top: 10,
		bottom: 5,
		right: 15,
	},
	tooltip: {
		appendToBody: true,
		// trigger: "axis",
		// axisPointer: {
		// 	type: "line",
		// 	lineStyle: {
		// 		opacity: 0,
		// 	},
		// },
		// formatter: function (prams) {
		// 	if (prams[0].data === 0) {
		// 		return "数量：0%";
		// 	} else {
		// 		return "数量：" + prams[0].data;
		// 	}
		// },
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
	},
	xAxis: {
		type: "category",
		data: value2.gridList,
		axisLabel: {
			fontSize: 12,
			color: "#798A9B",
		},
		axisLine: {
			lineStyle: {
				color: "#243753",
			},
		},
	},
	yAxis: {
		type: "value",
		axisLabel: {
			fontSize: 12,
			color: "#798A9B",
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: "#283352",
			},
		},
	},
	series: [
		{
			name: "一般隐患",
			data: value2.num1,
			type: "bar",
			stack: "total",
			barWidth: "25%",
			xAxisIndex: 0,
			yAxisIndex: 0,
			itemStyle: {
				color: "#409EFF",
			},
			zlevel: 11,
			showBackground: true,
			backgroundStyle: {
				color: "rgba(180, 180, 180, 0.2)",
				width: "120%",
			},
		},
		{
			name: "重大隐患",
			data: value2.num2,
			type: "bar",
			stack: "total",
			barWidth: "25%",
			xAxisIndex: 0,
			yAxisIndex: 0,
			itemStyle: {
				color: "#FFE000",
			},
			zlevel: 11,
			showBackground: true,
			backgroundStyle: {
				color: "rgba(180, 180, 180, 0.2)",
				width: "120%",
			},
		},
	],
});
</script>

<template>
	<div class="statisticPanel">
		<div class="statisticBox">
			<div class="yearPicker">
				<span>隐患风险分析</span>
				<el-date-picker
					style="width: 90px"
					v-model="year"
					type="year"
					placeholder="选择年份"
					:clearable="false"
				/>
			</div>
			<el-divider direction="vertical" />
			<div class="chartBox">
				<BaseEchart :option="option1"></BaseEchart>
			</div>
			<el-divider direction="vertical" />
			<div class="chartBox">
				<BaseEchart :option="option2"></BaseEchart>
			</div>
		</div>
	</div>
	<page-content>
		<template #header>
			<Filter />
			<Handler />
		</template>
		<Sheet />
		<template #footer>
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:disabled="isLoading"
				:total="total"
			/>
		</template>
	</page-content>
</template>

<style scoped lang="scss">
.statisticPanel {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 120px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.statisticBox {
		width: 95%;
		height: 80%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0px 15px;
		background-color: #cdeaff59;
		.yearPicker {
			width: 7%;
			height: 75%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: 18px;
				font-weight: 600;
			}
		}
		.chartBox {
			width: 40%;
			height: 100%;
		}
	}
}
</style>
